<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    html,body{
      height: 100%;
    }
  </style>
  <script src="js/psd.js"></script>
  <script src="js/jquery.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(function(){
      var psd
      var $body = $(document.body)
      var PSD = require('psd');

      function onDrop(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        PSD.fromEvent(evt.originalEvent).then(function (psd) {
          console.log(psd.tree().export());
          window.psd = psd
          psd.tree().children().forEach(function(item, index, layers){
            console.log(item)
            if(item.width == 0 || item.height == 0){
              return false
            }
            var $img = $(item.toPng()).css({
              position: 'absolute',
              left: item.left,
              top: item.top
            })
            $body.append($img)
          })
        });
      }
      $body.on('dragenter dragover', function(e){
        e.preventDefault();
      })
      $body.on('drop', onDrop)
    })
    </script>
</body>
</html>